<template>
  <div>
    <div class="flex justify-between min-w-full">
      <el-carousel
        ref="headBanner"
        indicator-position="none"
        class="w-full"
        :autoplay="true"
        height="38rem"
        style="position: relative"
      >
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <a :href="item.redirectUrl">
            <el-image
              style="width: 100%; height: 100%"
              :src="item.picture"
            ></el-image>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="menu-container">
      <ul class="w-1200-container menu-list">
        <li v-for="item in menuList" :key="item.name" class="menu-item">
          <a :href="item.alink"> {{ item.name }} </a>
        </li>
      </ul>
    </div>

    <div
      class="w-1200-container level-desc-container mt-20 relative"
      style="height: 500px"
      id="levelDesc"
    >
      <div class="left">
        <div class="relative py-4 w-80">
          <el-image
            class="absolute -left-16 -top-2 w-40 h-30"
            :src="require('@/assets/images/level/unicorn.png')"
            fit="contain"
          ></el-image>
          <el-image
            class="absolute -right-32 -top-12 w-40 h-30"
            :src="require('@/assets/images/level/gazelle.png')"
            fit="contain"
          ></el-image>
          <h4 class="pl-20 text-blue-500">独角兽/瞪羚榜单</h4>
        </div>
        <p class="content mt-6 relative">
          <el-image
            class="absolute right-0 -top-20 w-20 h-20"
            :src="require('@/assets/images/level/topCircle.png')"
            fit="contain"
          ></el-image>

          为深入实施创新驱动发展战略，加快创新型省份建设步伐，促进独角兽、瞪羚企业发展壮大，加快新旧动能转换，推动我省高质量跨越式发展，
          在省委、省政府的坚强领导下，省科技厅以习近平新时代中国特色社会主义思想为指导，深入贯彻党的十九大精神和省委十四届七次全会精神，围绕“创新引领、改革攻坚、开放提升、绿色崛起、担当实干、兴赣富民”的工作方针，扎实推进创新型省份建设工作。
        </p>
        <!-- <p class="content w-3/4">
           在省委、省政府的坚强领导下，省科技厅以习近平新时代中国特色社会主义思想为指导，深入贯彻党的十九大精神和省委十四届七次全会精神，围绕“创新引领、改革攻坚、开放提升、绿色崛起、担当实干、兴赣富民”的工作方针，扎实推进创新型省份建设工作。全省综合科技进步水平连续五年位置前移，由全国25位前移至19位，为推动江西高质量、跨越式发展提供了有力支撑。当前，科技型企业正成为创新驱动发展的新引擎，通过独角兽、瞪羚企业的培育，带动我省经济的高质量发展，实现新旧动能转换和产业升级已迫在眉睫。我省独角兽、瞪羚企业榜单的发布，是我省深入实施创新驱动发展战略，加快创新型省份建设步伐的重要举措。
        </p> -->
        <p class="content w-4/5">
          当前，科技型企业正成为创新驱动发展的新引擎，通过独角兽、瞪羚企业的培育，带动我省经济的高质量发展，实现新旧动能转换和产业升级已迫在眉睫。我省独角兽、瞪羚企业榜单的发布，是我省深入实施创新驱动发展战略，加快创新型省份建设步伐的重要举措。
          当前，我省正在大力推进创新型省份建设，将在三年内培育出2到3个独角兽企业、100个瞪羚企业，大力实施“科技型企业梯度培育计划”。
        </p>
      </div>
      <div class="right">
        <el-image
          class="absolute right-0 top-10 w-1/2 h-full"
          :src="require('@/assets/images/level/desBg.png')"
        ></el-image>
      </div>

      <div class="relative col-span-4 text-blue-600 font-bold mt-12">
        <el-image
          class="absolute left-0 bottom-0 w-20 h-20"
          :src="require('@/assets/images/level/bottomCircle.png')"
          fit="contain"
        ></el-image>
        <div class="pl-16">
          <p>评选维度</p>
          <p>创新性、前瞻性、成长性、可行性、独特性</p>
        </div>
      </div>
    </div>

    <div class="bg-gradient-to-r from-blue-700 to-blue-500 mt-12">
      <ul class="w-1200-container flex justify-between text-white py-8">
        <li>300+行业领袖</li>
        <li>6个月专业评审</li>
        <li>800+合作机构</li>
        <li>6500+参选企业</li>
        <li>80+合作媒体</li>
      </ul>
    </div>

    <div class="w-1200-container mt-16" id="levelLight">
      <div class="text-center my-4">
        <h6>榜单亮点</h6>
        <p class="text-gray-300">Wonderful moment</p>
      </div>
      <ul class="level-light-container">
        <li
          v-for="levelLight in levelLights"
          :key="levelLight.name"
          :data-lightname="levelLight.name"
          class="light-item"
        >
          <el-image :src="levelLight.img" fit="cover"></el-image>
        </li>
      </ul>
    </div>

    <div class="w-1200-container mt-20" id="levelStandard">
      <div class="text-center my-4">
        <h6>评选标准</h6>
        <p class="text-gray-300">Selection criteria</p>
      </div>

      <div>
        <!--  -->

        <ul class="exam-nav">
          <div class="exam-active-line" :style="{ left: examLineLeft }"></div>
          <li :class="[examItemClass(0)]" @click="examActive = 0">
            独角兽企业
          </li>
          <li :class="[examItemClass(1)]" @click="examActive = 1">瞪羚企业</li>
        </ul>
        <div class="exam-container">
          <div class="exam-content" v-html="examContent"></div>
        </div>
      </div>
    </div>

    <div class="w-1200-container mt-20" id="oldLevel">
      <div class="text-center my-4">
        <h6>历届榜单</h6>
        <p class="text-gray-300">Previous list</p>
      </div>
      <div>
        <router-select-strip
          listPropVName="dictValue"
          :active-id.sync="queryParams.serial"
          :screenList="companyTypes"
          label="认定类型"
          @itemClick="handleCompany"
        />
        <DashLine />
        <router-select-strip
          listPropVName="dictLabel"
          :active-id.sync="queryParams.year"
          :screenList="yearList"
          label="认定年度"
          @itemClick="handleConfirmYear"
        />
      </div>

      <el-table
        :headerCellStyle="{ ...headCellStyle }"
        :cellStyle="cellStyle"
        stripe
        :data="infoList"
        class="self-table"
      >
        <el-table-column type="index" label="排名" width="80">
        </el-table-column>
        <el-table-column prop="year" label="认定年度" width="100">
        </el-table-column>

        <el-table-column prop="recognType" label="认定类型" width="180">
        </el-table-column>

        <el-table-column prop="picture" label="企业logo" width="180">
          <template slot-scope="scope">
            <el-image :src="scope.row.picture" class="h-12" fit="contain">
              <el-image slot="error" class="h-12" :src="defaultIcon" fit="contain">
              </el-image>
            </el-image>
          </template>
        </el-table-column>

        <el-table-column prop="comName" label="企业名称">
          <template slot-scope="scope">
            <router-link target="_blank" :to="{ path: 'info/infodetail/' + scope.row.id }">
              <span class="text-blue-600 hover:text-blue-600">
                {{ scope.row.comName }}
              </span>
            </router-link>
          </template>
        </el-table-column>

        <el-table-column prop="industry" label="行业领域"> </el-table-column>

        <el-table-column prop="coordinate" label="城市" width="100">
        </el-table-column>
      </el-table>
      <h5 class="my-8 text-center py-2 text-blue-500">
        <router-link
          :to="{
            path: '/info',
          }"
        >
          查看更多
        </router-link>
      </h5>
    </div>
  </div>
</template>

<script>
import { getInfo } from "@/api/level";

import { getBanner } from "@/api/banner";


import RouterSelectStrip from "@/components/HeadScreenStrip/RouterSelectStrip.vue";
import DashLine from "@/components/DashLine";
import CompanyCard from "@/views/components/CompanyCard";
import CompanyYearEchart from "./CompanyYearEchart.vue";
import LevelLinkCard from "@/views/components/LevelLinkCard";
export default {
  components: {
    RouterSelectStrip,
    DashLine,
    CompanyCard,
    CompanyYearEchart,
    LevelLinkCard,
  },
  data() {
    return {
      defaultIcon: require("@/assets/images/company/default.png"),

      cellStyle: {
        textAlign: "center",
        padding: "1rem .5rem",
      },
      headCellStyle: {
        textAlign: "center",
        padding: "1rem .5rem",
        backgroundColor: "#f1f3fb",
        fontWeight: "bold",
      },
      tableTotal: 1,
      queryParams: {
        serial: undefined,
        year: undefined,
      },
      menuList: [
        { name: "榜单介绍", alink: "#levelDesc" },
        { name: "榜单亮点", alink: "#levelLight" },
        { name: "评选标准", alink: "#levelStandard" },
        { name: "往届榜单", alink: "#oldLevel" },
      ],
      //  榜单亮点
      levelLights: [
        {
          name: "高端对话",
          img: require("@/assets/images/level/light/1.jpg"),
        },
        {
          name: "群英荟聚",
          img: require("@/assets/images/level/light/2.jpg"),
        },
        {
          name: "项目签约",
          img: require("@/assets/images/level/light/3.jpg"),
        },
        {
          name: "榜单发布",
          img: require("@/assets/images/level/light/4.jpg"),
        },
        {
          name: "投融资对接",
          img: require("@/assets/images/level/light/5.jpg"),
        },
        {
          name: "基金成立",
          img: require("@/assets/images/level/light/6.jpg"),
        },
      ],
      examActive: 0,
      // 评测标准
      examList: [
        {
          name: "独角兽企业",
          content: `<p>1．独角兽企业</p><p>指具有发展速度快、稀少，备受投资者青睐等属性的企业。需同时满足下列条件：</p><p>①成立时间不超过10年（2012年1月1日（含）之后注册）；&nbsp;②估值≥10亿美元；</p><p>③获得过私募投资，且尚未上市。&nbsp;2．潜在独角兽企业</p><p>指从创业团队、产业方向、技术创新能力及发展趋势看，具有成为独角兽企业潜质的企业。需同时满足下列条件：</p><p>①成立时间10年之内（2013年1月1日（含）之后注册）；</p><p>②成立5年之内（2018年1月1日（含）之后注册）估值≥1亿美元，或成立5-9年估值≥5亿美元；</p><p>③获得过私募投资，且尚未上市。&nbsp;3．种子独角兽企业</p><p>指处于创业期，具有较好发展前景，商业模式得到资本和市场初步认可的，具有成为潜在独角兽、独角兽企业潜质的企业，需同时满足下列条件：</p><p>①成立时间不超过5年（2017年1月1日（含）之后注册）；&nbsp;②估值≥1亿人民币；</p><p>③获得过私募投资，且尚未上市。</p><p><br></p>`,
        },
        {
          name: "瞪羚企业",
          content: `<p ><span style=" font-family: 仿宋_GB2312;">1．瞪羚企业</span></p><p ><span style=" font-family: 仿宋_GB2312;">指跨越死亡谷、进入高速成长期的创新创业企业，也被称为高成长企业。需同时满足增长率与创新能力条件，具体为：</span></p><p ><span style=" font-family: 仿宋_GB2312;">（1）增长率条件（需满足以下条件之一）</span></p><p ><span style=" font-family: 仿宋_GB2312;">①企业于2006年1月1日（含）之后注册，2016年营业收入≥1000万元，2016-2019年营业收入复合增长率≥20%，且2019年度正增长；</span></p><p ><span style=" font-family: 仿宋_GB2312;">②企业于2006年1月1日（含）之后注册，2016年雇员人数≥100人，2016-2019年雇员人数复合增长率≥30%，且2019年度正增长；</span></p><p ><span style=" font-family: 仿宋_GB2312;">③企业于2016年1月1日（含）之后注册，2019年营业收入≥5亿元，且2019年度正增长；</span></p><p ><span style=" font-family: 仿宋_GB2312;">④企业于2011年1月1日（含）之后注册，且2019年营业收入≥10亿元，且2019年度正增长。</span></p><p ><span style=" font-family: 仿宋_GB2312;">（2）创新能力条件</span></p><p ><span style=" font-family: 仿宋_GB2312;">2016-2019年平均研究与试验发展（R&amp;D）投入强度（即R&amp;D经费占营业收入的比例）≥2.5%（注册时间不足4年的，根据实际投入年份数据计算）。</span></p><p><span style=" font-family: 仿宋_GB2312;">&nbsp;</span></p><p ><span style=" font-family: 仿宋_GB2312;">2．潜在瞪羚企业</span></p><p ><span style=" font-family: 仿宋_GB2312;">指发展迅速，有希望快速成为瞪羚企业的创新型科技企业。需同时满足增长率与创新能力条件，具体为：</span></p><p ><span style=" font-family: 仿宋_GB2312;">（1）增长率条件（需满足以下条件之一）</span></p><p ><span style=" font-family: 仿宋_GB2312;">①企业于2013年1月1日（含）之后注册，2019年营业收入≥500万，2019-2021年营业收入复合增长率≥20%，且2021年度正增长；</span></p><p ><span style=" font-family: 仿宋_GB2312;">②企业于2013年1月1日（含）之后注册，2019年雇员人数≥50人，2019-2021年雇员总数复合增长率≥30%，且2021年度正增长；</span></p><p ><span style=" font-family: 仿宋_GB2312;">③企业于2020年1月1日（含）之后注册，且2021年营业收入≥1亿元，且2019年度正增长；</span></p><p ><span style=" font-family: 仿宋_GB2312;">④企业于2018年1月1日（含）之后注册，且2021年营业收入≥3亿元，且2021年度正增长。</span></p><p ><span style=" font-family: 仿宋_GB2312;">（2）创新能力条件</span></p><p ><span style=" font-family: 仿宋_GB2312;">2019—2021年平均研究与试验发展（R&amp;D）经费投入强度（即R&amp;D经费占营业收入的比例）≥2.5%（注册时间不足3年的，根据实际投入年份数据计算）。</span></p><p><br></p>`,
        },
      ],
      infoList: [
        // {
        //   comName: "南昌黑鲨科技有限公司",
        //   picture:
        //     "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        //   coordinate: "",
        //   recognType: "",
        //   year: "",
        //   industry: "",
        // },
      ],

      bannerDictLabel: "榜单",
      bannerDicts: [],
      bannerList: [
        // {
        //   picture: require("@/assets/images/level.jpg"),
        //   redirectUrl: "",
        //   id: 3,
        // },
      ],
      companyTypes: [
        { dictValue: 4, dictLabel: "独角兽企业" },
        { dictValue: 5, dictLabel: "潜在独角兽企业" },
        { dictValue: 6, dictLabel: "种子独角兽企业" },
        { dictValue: 2, dictLabel: "瞪羚企业" },
        { dictValue: 3, dictLabel: "潜在瞪羚企业" },
      ],
      yearList: [
        { dictValue: 0, dictLabel: "2021" },
        { dictValue: 1, dictLabel: "2020" },
        { dictValue: 2, dictLabel: "2019" },
        { dictValue: 3, dictLabel: "2018" },
        { dictValue: 4, dictLabel: "2017" },
        { dictValue: 5, dictLabel: "2016" },
        { dictValue: 5, dictLabel: "2015" },

      ],
    };
  },
  computed: {
    examContent() {
      return this.examList[this.examActive]["content"];
    },
    examItemClass() {
      return (nowIndex) => {
        return nowIndex === this.examActive ? "active-nav-item" : "nav-item";
      };
    },
    examLineLeft() {
      return 0 === this.examActive ? 0 : "50%";
    },
  },
  async created() {
    this.getList();

        await this.getBannerDicts();
    this.initBannerList();
  },
  methods: {
            // 根据字典名称 获取相应的 字典值
    /**
     * @param {Array} dicts 字典列表
     * @param {String} dictLabel 字典名称
     * @returns {String} 返回相应的字典值.若没有相应的值返回  ''  （空字符串）
     */
    getBannerValue(dicts, dictLabel) {
      let findItem = dicts.find((item) => item.dictLabel === dictLabel);
      return findItem && findItem.dictValue ? findItem.dictValue : "";
    },

        // 初始化轮播
    initBannerList() {
      let bannerValue = this.getBannerValue(
        this.bannerDicts,
        this.bannerDictLabel
      );
      getBanner({ type: parseInt(bannerValue) }).then((res) => {
        if (res.code == 200) {
          this.bannerList = res.rows;
        }
      });
    },

    /**
     * @description 获取轮播图字典列表 并赋值给 bannerDicts
     */
    async getBannerDicts() {
      let dictsRes = await this.getDicts("rotation_map");
      if (dictsRes.code === 200) {
        this.bannerDicts = dictsRes.data;
      }
    },

    async getList() {
      let queryParams = { ...this.queryParams };
      if (queryParams.serial === undefined) {
        queryParams.serial = 0;
      }
      if (queryParams.year === "全部") {
        queryParams.year = undefined;
      }
      let res = await getInfo(queryParams);

      if (res.code === 200) {
        this.infoList = res.data;
      }
    },
    handleConfirmYear(activeItem) {
      this.getList();
    },
    handleCompany() {
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.list-container {
  // min-height: 1350px;
  @apply py-4 mt-4;
  .list-item {
    @apply flex p-4 border-b-2  border-gray-100 cursor-pointer;
    .left {
      min-width: 103px;
      min-height: 103px;
      width: 103px;
      height: 103px;
      @apply rounded-md shadow-lg;
    }
    .main {
      @apply flex-1 flex-grow flex flex-col justify-around px-4;
      .sub-line {
        @apply flex;
        li {
          @apply mr-4;
        }
      }
    }
    .right {
      @apply m-auto text-t999;
    }
  }
}

.menu-container {
  @apply bg-gray-200;

  .menu-list {
    @apply flex justify-between;

    .menu-item {
      @apply text-xl font-bold py-4;
    }
  }
}
.level-desc-container {
  @apply grid grid-cols-5 p-4;
  .left {
    @apply col-span-3;
    .content {
      text-indent: 2rem;
    }
  }
  .right {
    @apply col-span-2;
  }
}
.level-light-container {
  @apply grid grid-cols-3 gap-4;

  .light-item {
    min-height: 260px;
    @apply relative;
    .el-image {
      @apply w-full h-full;
    }
  }
  .light-item:before {
    content: attr(data-lightname);
    @apply absolute z-10 left-0 top-0 flex flex-col justify-center w-full h-full text-center align-middle text-white text-xl  bg-black bg-opacity-40;
  }
}

.exam-nav {
  @apply relative grid grid-cols-2 text-xl text-center mt-8;
  .nav-item,
  .active-nav-item {
    @apply z-10 cursor-pointer py-2;
  }
  .active-nav-item {
    @apply text-white;
  }
  .exam-active-line {
    @apply absolute  top-0 w-1/2 h-full bg-blue-500 transition-all duration-150;
  }
}
.exam-container {
  min-height: 300px;
  @apply px-20 py-8;
}

.self-table {
  @apply mt-8;
}
</style>